<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本列表</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				v-for指令:
					1.用于展示列表数据
					2.语法：v-for="(item, index) in arr" :key="item.id"
					3.可遍历：数组、对象、字符串（几乎不用）
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>人员列表</h1>
			<ul>
				<li :key="item.id" v-for="(item,index) in persons">
					{{item.name}}--{{item.age}}--{{item.sex}}
				</li>
			</ul>

			<h1>汽车信息</h1>
			<ul>
				<li :key="key" v-for="(value,key) in car">
					{{key}}--{{value}}
				</li>
			</ul>

			<h1>测试遍历字符串(几乎不用)</h1>
			<ul>
				<li :key="index" v-for="(char,index) in str">
					{{index}}--{{char}}
				</li>
			</ul>
		</div>

		<script type="text/javascript" >
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'老刘',sex:'男',age:18},
						{id:'002',name:'老王',sex:'女',age:19},
						{id:'003',name:'老张',sex:'男',age:20},
						{id:'004',name:'zs',sex:'女',age:21}
					],
					car:{
						name:'奔驰c63',
						price:'60万',
						color:'灰色'
					},
					str:'hello,1022'
				},
			})

		</script>
	</body>
</html>